<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'inspect.add'">创建</el-button>
    <div class="filter-container" style="flex-wrap: wrap">
      <el-date-picker class="filter-item" style="width: 300px" v-model="time" type="daterange" range-separator="-"
        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeItem">
      </el-date-picker>

      <el-select v-model="query.queryString.material_id" placeholder="请选择物料编码" class="filter-item" filterable
        @change="research" clearable @clear="research">
        <el-option v-for="item in selectData" :key="item.id" :label="item.key_part_no + ' ' + item.key_part_name"
          :value="item.id">
        </el-option>
      </el-select>

      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">重置</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'inspect.edit'">编辑</a>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)" v-permission="'inspect.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'inspect',
  data: function () {
    return {
      name: '检查',
      apiList: this.$api.inspect,
      apiCreate: this.$api.inspectAdd,
      apiSingle: this.$api.inspectId,
      apiDelete: this.$api.inspectRemove,
      time: [],
      query: {
        page: 1,
        size: 10,
        queryString: {
          material_id: '',
          start_time: '',
          end_time: '',
        },
      },
      selectData: [],
      tableProps: {
        border: true,
        opsColWith: 90,
        hideOperations: false,
      },
      columns: [
        { title: '物料编码', key: 'material_id' },
        { title: '供应商', key: 'supplier' },
        { title: '批次', key: 'batch' },
        { title: '来料数量', key: 'come_count' },
        { title: '良品数量', key: 'good_product' },
        { title: '良率', key: 'yield_rate' },
        { title: '备注', key: 'remake' },
        { title: '检测时间', key: 'inspect_time' },
        { title: '最后修改时间', key: 'modify_time' },
        { title: '最后修改人', key: 'modify_user' },
      ],
      fields: [
        {
          title: '物料编码',
          key: 'material_id',
          name: 'select',
          options: [],
          required: true,
          span: 12,
          props: { filterable: true },
        },
        {
          title: '供应商',
          key: 'supplier',
          name: 'select',
          options: [],
          required: true,
          span: 12,
          props: { filterable: true },
        },
        { title: '批次', key: 'batch', props: { maxlength: 20, 'show-word-limit': true }, required: true, span: 13 },
        {
          title: '来料数量',
          key: 'come_count',
          required: true,
          span: 12,
          name: 'number',
          props: { min: 1, precision: 0, controls: false },
        },
        {
          title: '良品数量',
          key: 'good_product',
          required: true,
          span: 12,
          name: 'number',
          props: { min: 1, precision: 0 },
        },
        { title: '备注', key: 'remake', name: 'textarea', props: { maxlength: 500, controls: false } },
      ],
    }
  },
  created: function () {
    this.getList()
    this.$request(this.$api.mat + 'getlist_v10', {
      category: 1,
      page: 1,
      size: 9999,
    }).then((r) => {
      this.setFieldOptions('material_id', r.list, 'id', ['key_part_no', 'key_part_name'])
      this.selectData = r.list
    })
    this.$request(this.$api.vendor + 'getlist', {
      page: 1,
      size: 9999,
    }).then((r) => {
      this.setFieldOptions('supplier', r.list, 'vendor_name', 'vendor_name')
    })
  },
  watch: {
    data(val) {
      this.getFieldConfig('material_id').props.disabled = !!val.id
      this.getFieldConfig('supplier').props.disabled = !!val.id
    },
  },
  methods: {
    reset() {
      this.time = []
      this.query.queryString.start_time = ''
      this.query.queryString.end_time = ''
      this.query.queryString.material_id = ''
    },
    getList() {
      var res = { ...this.query, ...this.query.queryString }
      console.log(res)
      this.pageLoading = true
      let url = this.apiList
      this.$request(url, {
        page: res.page,
        size: res.size,
        'queryString.start_time': res.start_time,
        'queryString.material_id': res.material_id,
        'queryString.end_time': res.end_time,
      })
        .then((r) => {
          console.log(r)
          this.list = this.formatList(r.list)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    submit() {
      let url = this.apiCreate
      console.log(this.data)
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, data)
      if (!check) return
      this.submitLoading = true
      this.$request(url, data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    editItem(v) {
      this.pageLoading = true
      let url = this.apiSingle
      this.$request(url, {
        vid: v.id,
      })
        .then((r) => {
          this.data = this.formatAfterGet(r)
          this.editFormVisible = true
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    deleteItem(v) {
      console.log(v.id)
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        this.$request(this.apiDelete + '?' + 'vid=' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    changeItem() {
      console.log(this.time)
      if (this.time) {
        this.query.queryString.start_time = this.time[0]
        this.query.queryString.end_time = this.time[1]
      } else {
        this.time = []
        this.query.queryString.start_time = ''
        this.query.queryString.end_time = ''
      }
    },
  },
}
</script>
<style scoped lang='scss'>
::v-deep .el-input-number {
  width: 100% !important;
  .el-input-number__decrease {
    display: none;
  }
  .el-input-number__increase {
    display: none;
  }
  input {
    padding: 0 15px;
    text-align: left;
  }
}
</style>
